<template>
	<view class="profile_box">
		<view class="user_login">
			<view @click="toUserDetail(uid)"><image :src="userImg" mode="aspectFit"></image></view>
			<view v-show="!isLogin"><text>登录后立享手机电脑多端同步</text></view>
			<view v-show="!isLogin"><button @click="login">立即登录</button></view>
			<view v-show="isLogin"><text>{{user.name}}</text></view>
			<view v-show="isLogin" class="buy_vip">
				开通黑胶VIP<uni-icons type="arrowright" size="12" color="#FFFFFF"></uni-icons>
				</view>
		</view>
		<view class="user_music">
			<view v-for="(item,index) in userMusList" :key="index">
				<icon type="#FFFDEF" :class="item.class"></icon>
				<view class="title">{{item.title}}</view>
			</view>
		</view>
		<view class="music_box">
			<view class="my_music_box">
				<view class="my_music">
					<view>我的音乐</view>
					<view>
						<uni-icons type="arrowright"></uni-icons>
					</view>
				</view>
				<view>
					<scroll-view :scroll-x="true">
						<view class="recom_box">
							<view v-for="(item,index) in myMusList" :key="index" 
							:class="item.box">
								<view><icon type="#000000" :class="item.class"></icon></view>
								<view>{{item.title}}</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="play_box">
					<view class="play_title">
						<view>最近播放</view>
						<view>更多<uni-icons type="arrowright"></uni-icons></view>
					</view>
					<view class="recent_music">
						<view class="re_music_box">
							<view>
								<image src="@/static/img/recent.jpg" mode="aspectFit"></image>
								<icon class="iconfont icon-bofang" type="#000000"></icon>
								</view>
							<view>
								<view>全部已播放歌曲</view>
								<view style="margin-top: 10rpx;">{{recMusCount}}首</view>
							</view>
						</view>
					</view>
				</view>
				<view class="gedan_box">
					<view class="gedan_title">
						<view>创建歌单0</view>
						<view>收藏歌单0</view>
						<view><uni-icons type="plusempty" size="24"></uni-icons></view>
					</view>
					<view class="add_forign_gedan">
						<view class="add_btn_box">
							<view class="add_btn">
								<uni-icons type="plusempty" size="24" color="#c1c1c1"></uni-icons>
								<text>导入外部歌单</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 左侧菜单 -->
		<uni-drawer ref="homeRef">
		  <view class="side_box">
		  	<view class="side_vip">
				<view class="vip_box">
					<view>
						<view class="vip_title">开通黑胶VIP</view>
						<view class="tequan">加入黑胶VIP，立享超17项专属特权</view>
					</view>
					<view>
						<view class="vip_center">会员中心</view>
					</view>
				</view>
				<view class="discount">
					<view>
						<view class="dis_title">黑胶VIP低至0.16元/天</view>
						<view>万元开学礼包等你来拿！</view>
					</view>
					<view>
						<uni-icons type="arrowright"></uni-icons>
					</view>
				</view>
		  	</view>
			<view class="side_content">
				<view class="header">
					<!-- 未登录 -->
					<view v-show="!isLogin">
						<view class="side_title">
							<view>手机电脑多端同步，尽享海量高品质音乐</view>
						</view>
						<view class="btn_side_box">
							<view class="btn_login" @click="login">
								立即登录
							</view>
						</view>	
					</view>
					<!-- 登录状态 -->
					<view class="logined" v-show="isLogin">
						<view>
							<image :src="userImg"></image>
						</view>
						<view class="logined_user_name">{{user.name}}</view>
					</view>
					<view class="nav_box">
						<view v-for="(item,index) in navList" :key="index">
							<icon type="#FFFFFF" :class="item.icon"></icon>
							<view class="nav_title">{{item.title}}</view>
						</view>
					</view>
				</view>
				<view class="nav_content">
					<view class="btn_item" v-for="(item,index) in btn_list" :key="index">
						{{item.name}}
					</view>
				</view>
				<view class="footer">
					<view>夜间模式</view>
					<view>设置</view>
					<view @click="logout">退出</view>
				</view>
			</view>
		  </view>
		</uni-drawer>
	</view>
</template>

<script>
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
	import {getUserInfo,getUserSta,loginRef,userLogout} from '@/network/user.js'
	export default {
		components:{
			uniDrawer
		},
		data(){
			return {
				userImg:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
				userMusList:[
					{class:'iconfont icon-yinyue ',title:'本地音乐'},
					{class:'iconfont icon-xiazai',title:'下载管理'},
					{class:'iconfont icon-diantaiy',title:'我的电台'},
					{class:'iconfont icon-shoucang',title:'我的收藏'},
					{class:'iconfont icon-xinge',title:'关注新歌'}],
				myMusList:[
					{box:'item_box box_img1',class:'iconfont icon-shoucang2 icon_shoucang',title:'我喜欢的音乐'},
					{box:'item_box box_img2',class:'iconfont icon-shouyinji',title:'私人FM'},
					{box:'item_box box_img3',class:'iconfont icon-jingxuan',title:'推歌精选'},
					{box:'item_box box_img4',class:'iconfont icon-yinyue',title:'最嗨电音'},
					{box:'item_box box_img5',class:'iconfont icon-zhuanji',title:'古典专区'}
				],
				navList:[
					{icon:'iconfont icon-email',title:'我的消息'},
					{icon:'iconfont icon-friend',title:'我的好友'},
					{icon:'iconfont icon-zhuye',title:'个人主页'},
					{icon:'iconfont icon-yifu',title:'个性装扮'},
				],
				btn_list:[
					{name:'听歌识曲'},
					{name:'演出'},
					{name:'商城'},
					{name:'附近的人'},
					{name:'口袋彩铃'},
					{name:'我的订单'},
					{name:'定时停止播放'},
					{name:'扫一扫'},
					{name:'音乐闹钟'},
					{name:'在线听歌免流量'},
					{name:'青少年模式'}
				],
				recMusCount:0,
				uid:'',
				cookie:'',
				isLogin:false,
				user:{}
			}
		},
		methods:{
			// 用户登录
			login(){
				uni.navigateTo({
					url:'../login/login'
				})
			},
			getStorage(){
				uni.getStorage({
					key:'uid',
					success: res => {
						this.uid =  res.data
					},
					fail: () => {
						uni.getStorage({
							key:'userInfo',
							success: (res) => {
								this.isLogin = true
								this.userImg = res.data.avatarUrl
								this.user.name = res.data.nickName
								this.uid = res.data.openId
							}
						})
					}
				})
				uni.getStorage({
					key:'cookie',
					success: res => {
						this.cookie =  res.data
					},
					fail: (res) => {
						if(res.data === ''){
							this.isLogin = false
							this.user = {}
							this.cookie = ''
						}
					}
				})
			},
			getUserInfoM(){
				// 获取用户信息
				if(this.uid !=='' && this.cookie !== ''){
					getUserInfo(this.uid,this.cookie).then(res => {
						// console.log(res)
						if(res.data.code !== 200){
							console.log("请登录")
						}else{
							this.isLogin = res.data.adValid
							this.userImg = res.data.profile.avatarUrl
							this.user.name = res.data.profile.nickname
							this.recMusCount = res.data.listenSongs
						}
					})
				}
			},
			// 用户退出
			logout(){
				uni.clearStorage()
				this.userImg = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
				this.isLogin = false
				this.user = {}
				this.cookie = ''
				this.uid = ''
				this.$refs.homeRef.close()
				userLogout()
			},
			// 跳转用户详情界面
			toUserDetail(id){
				if(id){
					uni.navigateTo({
						url:`../user/user?uid=${id}`
					})
				}else {
					uni.showToast({
						title:'请先登录',
						icon:"none"
					})
				}
			}
		},
		onNavigationBarButtonTap(options){
			if(options.index === 0){
				this.$refs.homeRef.open()
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			uni.startPullDownRefresh({
				success:res => {
					this.getStorage()
					this.getUserInfoM()
					// 刷新登录状态
					loginRef(this.cookie)
				}
			})
		},
		onShow() {
			uni.startPullDownRefresh({
				success: () => {
					this.getStorage()
					this.getUserInfoM()
					// 刷新登录状态
					loginRef(this.cookie)
				}
			})
			this.getStorage()
			this.getUserInfoM()
		},
	}
</script>

<style lang="scss">
	.profile_box{
		height:calc(100vh - 100px);
	}
	.user_login{
		height: 200rpx;
		background-color: rgb(9,7,35);
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		image{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
		.buy_vip{
			color: #FFFFFF;
			font-size: 20rpx;
		}
		text{
			font-size: 20rpx;
			color: #FFFFFF;
		}
		button{
			font-size: 20rpx;
			background-color: #000000;
			color: #FFFFFF;
			border:0.2rpx solid #FFFFFF;
			border-radius: 30rpx;
		}
	}
	.user_music{
		display: flex;
		justify-content: space-around;
		text-align: center;
		padding-bottom: 25rpx;
		background-color: rgb(9,7,35);
		icon{
			font-size: 50rpx;
			color: #FFFFFF;
		}
		.title{
			color: #FFFFFF;
			font-size: 25rpx;
		}
	}
	.music_box{
		background-color: #FFFFFF;
		height: 820rpx;
		border-radius: 30rpx 30rpx 0 0;
		padding: 20rpx;
		font-size: 25rpx;
		.my_music_box{
			width: 100%;
			.my_music{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			scroll-view{
				margin-top: 20rpx;
				.recom_box{
					width: 1200rpx;
					display: flex;
					.item_box{
						margin-left: 30rpx;
						background-color: #F2F2F2;
						width: 200rpx;
						height: 300rpx;
						border-radius: 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						color: #FFFFFF;
					}
				}
			}
			.play_box{
				margin-top: 30rpx;
				.play_title{
					display: flex;
					justify-content: space-between;
				}
				.recent_music{
					margin-top: 20rpx;
					.re_music_box{
						display: flex;
						align-items: center;
					}
					icon{
						position: relative;
						top:-50rpx;
						left: -75rpx;
						color: #FFFFFF;
					}
					image{
						width: 120rpx;
						height: 120rpx;
						border-radius: 10rpx;
					}
				}
			}
			.gedan_box{
				margin-top: 30rpx;
				.gedan_title{
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.add_forign_gedan{
					margin-top: 20rpx;
					display: flex;
					justify-content: center;
					.add_btn_box{
						border: 1rpx solid #c1c1c1;
						padding: 10rpx 20rpx;
						flex: 1;
						border-radius: 20rpx;
						.add_btn{
							color: #c1c1c1;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
		}
	}
	.box_img1{
		background-image: url(../../static/img/icon_img1.jpg);
	}
	.box_img2{
		background-image: url(../../static/img/icon_img2.jpg);
	}
	.box_img3{
		background-image: url(../../static/img/icon_img3.jpg);
	}
	.box_img4{
		background-image: url(../../static/img/icon_img4.jpg);
	}
	.box_img5{
		background-image: url(../../static/img/icon_img5.jpg);
		
	}
	.icon_shoucang{
		color: #EE0A24;
	}
	.side_box{
		padding-top: 10rpx;
		background-color: #74787c;
		width: 500rpx;
		.side_vip{
			font-size: 15rpx;
			height: 200rpx;
			width: 400rpx;
			border-top-left-radius: 10rpx;
			border-top-right-radius: 10rpx;
			padding: 0 10rpx;
			.vip_box{
				display: flex;
				justify-content: space-between;
				padding-top: 20rpx;
				padding-bottom: 20rpx;
				.vip_title{
					font-size: 30rpx;
					color: #d5c59f;
					font-weight: bolder;
				}
				.vip_center{
					margin-top: 8rpx;
					font-size: 20rpx;
					background-color: #d5c59f;
					border: 1px solid #d5c59f;
					border-radius: 10rpx;
					
				}
			}
			.discount{
				margin-top: 20rpx;
				font-size: 15rpx;
				display: flex;
				justify-content: space-between;
				.dis_title{
					color: #d5c59f;
					font-size: 20rpx;
				}
			}
		}
		.side_content{
			height: calc(100vh - 200rpx);
			background-color: #FFFFFF;
			border-top-left-radius: 10rpx;
			border-top-right-radius: 10rpx;
			.header{
				padding-top: 50rpx;
				.side_title{
					display: flex;
					font-size: 18rpx;
					justify-content: center;
				}
				.logined{
					display: flex;
					align-items: center;
					font-size: 25rpx;
					padding-left: 20rpx;
					image{
						border-radius: 50%;
						width: 80rpx;
						height: 80rpx;
					}
					.logined_user_name{
						margin-left: 15rpx;
					}
				}
				.btn_side_box{
					display: flex;
					justify-content: center;
					margin-top: 15rpx;
					.btn_login{
						width: 140rpx;
						height: 30rpx;
						line-height: 30rpx;
						border-radius: 15rpx;
						text-align: center;
						font-size: 20rpx;
						padding: 10rpx;
						background-color: #e25054;
						color: #FFFFFF;
					}
				}
				.nav_box{
					display: flex;
					text-align: center;
					justify-content: space-around;
					margin-top: 30rpx;
					padding-bottom: 50rpx;
					border-bottom: 1rpx solid #ececec;
					icon{
						color: #ea5257;
						font-size: 40rpx;
					}
					.nav_title{
						font-size: 18rpx;
					}
				}
			}
			.nav_content{
				padding: 0 0 0 20rpx;
				.btn_item{
					font-size: 25rpx;
					height: 30rpx;
					line-height: 30rpx;
					margin-top: 30rpx;
				}
				
			}
			.footer{
				border-top: 2rpx solid #F1F1F1;
				width: 100%;
				display: flex;
				justify-content: space-around;
				height: 50rpx;
				align-items: center;
				font-size: 28rpx;
				position: fixed;
				bottom: 10rpx;
			}
		}
	}
</style>
